import React, { useEffect, useState } from 'react'
import axios from "axios"
import PubSub from 'pubsub-js';
import "./HerosList.css"
import { Link, useNavigate } from 'react-router-dom';
export default function HerosList() {

    // 声明 英雄 状态
    let [heros,setHeros] = useState([]);

    // 使用 useNavigate()  来获取 navigate 函数
    let navigate = useNavigate();
    
    // 单独模拟  componentDidMount
    useEffect(()=>{

         //订阅频道消息
        PubSub.subscribe("keyword",async (msg,data)=>{
            //发送请求获取搜索的英雄
            let result = await axios.get(`http://api.xiaohigh.com/heros?name_like=${data}`);
            // console.log(result.data);
            // 更新状态
            setHeros(result.data);
        })


        // main  入口
        async function main(){
            //发送请求
            let {data} = await axios.get("http://api.xiaohigh.com/heros");
            // console.log(data);
            //处理后台数据
            let newData= data.slice(0,105);
            //设置状态
            setHeros(newData);
        }

        main();
        //模拟 compoentWillUnmount
        return ()=>{
            //取消订阅
            PubSub.unsubscribe("keyword")
        }
       
    },[])


    //创建 跳转 方法
    let toHerosCon = (value)=>{
        return ()=>{
             //逻辑验证  
            //不直接跳转， 先写逻辑验证，符合要求跳转。

            //编程式路由导航 传递 params 参数
            // navigate(`/heroscon/${value.id}/${value.name}`);

            //编程式路由导航 传递 query 参数
           /*  navigate(`/heroscon?id=${value.id}&name=${value.name}`,{
                replace:true
            });
 */
            //编程式路由导航 传递 state 参数
             navigate("/heroscon",{
                replace:true,
                state:{
                    id:value.id,
                    name:value.name
                }
            });


        }
    }


    return (
        <div className='heroslist'>
           
            <hr />
            <ul>
                {
                    heros.map(item =>{
                        return (
                            // 传递 params 参数
                            /* <li key={item.id}>
                                <Link to={`/heroscon/${item.id}/${item.name}`}>
                                    <img src={`http://cdn.xiaohigh.com${item.image}`} alt="" />
                                    <h3>{item.name}</h3>
                                </Link>
                            </li> */

                            // 传递 query 参数
                            /* <li key={item.id}>
                                <Link to={`/heroscon?id=${item.id}&name=${item.name}`}>
                                    <img src={`http://cdn.xiaohigh.com${item.image}`} alt="" />
                                    <h3>{item.name}</h3>
                                </Link>
                            </li> */

                            // 传递 state  参数
                            /* <li key={item.id}>
                                <Link to="/heroscon" state={{id:item.id,name:item.name}}>
                                    <img src={`http://cdn.xiaohigh.com${item.image}`} alt="" />
                                    <h3>{item.name}</h3>
                                </Link>
                            </li> */

                            <li key={item.id} onClick={toHerosCon(item)}>
                                
                                    <img src={`http://cdn.xiaohigh.com${item.image}`} alt="" />
                                    <h3>{item.name}</h3>
                               
                            </li>

                        )
                    })

                }

                {
                    heros.length === 0 &&  <li>暂无英雄，敬请期待！</li>
                }
               
                
            </ul>
        </div>
    )
}
